<template>
  <div class="housing">
    <header>
      <span>房源管理</span>
    </header>
    <main>
      <div class="housing_router">
        <!-- <span><router-link to="/admimistrator/housing/sell">销售楼盘</router-link></span>
        <span><router-link to="/admimistrator/housing/rent">房屋租赁</router-link></span>-->
        <el-tabs type="border-card">
          <el-tab-pane label="销售楼盘"><Sell/></el-tab-pane>
          <el-tab-pane label="房屋租赁"><First/></el-tab-pane>
        </el-tabs>
      </div>
      <!-- <div class="housing_main">
        <router-view></router-view>
      </div>-->
    </main>
  </div>
</template>

<script>
import Sell from "../../../components/Sell";
import First from "../../../components/First";
export default {
  data() {
    return {
      active: 2
    };
  },
  components: {
    Sell,
    First
  }
};
</script>

<style scoped>
.housing {
  width: 1300px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 30px;
  display: flex;
  align-items: center;
}
header span {
  margin-left: 20px;
}
main {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}
.housing_router {
  height: 60px;
  margin-left: 10px;
}
.housing_router span {
  width: 70px;
  height: 30px;
  border: 1px solid #000;
  display: inline-block;
  text-align: center;
  line-height: 30px;
}
.housing_router span a {
  color: #a5a4a4;
}
.housing_router span a.router-link-active {
  background: rgb(3, 172, 214);
  width: 100%;
  color: #ffffff;
  display: inline-block;
}
</style>